$(function () {
    // 渲染分类列表
    renderSelectList()
    function renderSelectList () {
        // 发起ajax请求
        axios({
            url: '/my/article/cates'
        }).then(({ data: res }) => {
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            let arr = ['<option value="">请选择分类</option>']
            res.data.forEach(ele => {
                arr.push(`<option value="${ele.Id}">${ele.name}</option>`)
            })
            $('form [name=name]').empty().html(arr.join(''))
            layui.form.render('select')
        })
    }

    // 定义一个全局参数将来方便 筛选和分页时修改
    let q = {
        pagenum: 1,
        pagesize: 5,
        cate_id: "",
        state: "",
    }
    // 渲染发布的文章
    initCateList()

    function initCateList () {
        // 发起ajax请求
        axios({
            url: '/my/article/list',
            params: q
        }).then(({ data: res }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            let arr = []
            res.data.forEach(ele => {
                arr.push(`
               <tr>
               <td><a id="checkList" href="javascript:;" style="color: blue;" data-id="${ele.Id}">${ele.title}</a></td>
               <td>${ele.cate_name}</td>
               <td>${padDate(ele.pub_date)}</td>
               <td>${ele.state}</td>
               <td>
               <a href="/article/art_edit.html?id=${ele.Id}" data-id="${ele.Id}" id="editList" class="layui-btn layui-btn-xs">编辑</a>
                   <button data-id="${ele.Id}" id="delList" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
               </td>
           </tr>
               `)
            })
            $('tbody').empty().html(arr.join(''))
            renderPage(res.total)
        })
    }

    // 渲染一下render
    layui.form.render('select')
    // 监听 状态栏发生变化改变筛选
    selStatus()
    function selStatus () {
        layui.form.on('select(status)', function (data) {
            q.state = data.value
        })
    }

    // 监听 分类下拉发生变化改变筛选
    selName()
    function selName () {
        layui.form.on('select(name)', function (data) {
            q.cate_id = data.value
            console.log(data.value);
        })
    }

    // 筛选按钮提交筛选条件
    $('form').on('submit', function (e) {
        e.preventDefault()
        initCateList()
    })
    // 筛选按钮提交筛选条件
    $('form').on('reset', function () {
        q.state = ''
        q.cate_id = ''
        initCateList();
    })



    // 渲染页码
    function renderPage (total) {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'pagelist', //注意，这里的 test1 是 ID，不用加 # 号
            count: total,  //数据总数，从服务端得到
            limit: q.pagesize,  //每页显示几条
            curr: q.pagenum,   //默认显示第几页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],  //控制页码中分页模块显示部分
            limits: [2, 3, 5, 10, 30],
            jump: function (obj, first) {  //jump:页码和每页显示条数发生改变时触发
                if (!first) {
                    q.pagenum = obj.curr;
                    q.pagesize = obj.limit;
                    initCateList()
                }
            }
        });
    }

    // 点击文章名弹出文章详细信息
    $('body').on('click', '#checkList', function () {

        // 获取当前文章的id
        let id = $(this).attr('data-id')
        // 发起ajax
        axios({
            url: '/my/article/' + id
        }).then(({ data: res }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            // 根据分类id 查询分类名
            axios({
                url: '/my/article/cates/' + res.data.cate_id
            }).then(({ data: res1 }) => {
                if (res1.status != 0) return layer.msg(res1.message);
                // 根据用户Id查询用户名信息
                axios({
                    url: '/my/userinfo/',
                    params: id = res.data.author_id
                }).then(({ data: res2 }) => {
                    if (res2.status != 0) return layer.msg(res2.message)
                    let author_name = res2.data.username
                    if (res2.data.nickname != '') {
                        author_name = res2.data.nickname
                    }
                    layer.open({
                        title: '预览文章',
                        type: 1,
                        area: ['85%', '85%'],
                        content: `
                <div class="layui-layer-content" style="height:281px">
                <div class="artinfo-box">
                    <h1 class="artinfo-title">${res.data.title}</h1>
                    <div class="artinfo-bar">
                        <span>作者：${author_name}</span>
                        <span>发布时间：${padDate(res.data.pub_date)}</span>
                        <span>所属分类：${res1.data.name}</span>
                        <span>状态：${res.data.state}</span>
                    </div>
                    <hr>
                    <img src="http://api-breakingnews-web.itheima.net${res.data.cover_img}" alt="" class="artinfo-cover">
                    <div>
                    ${res.data.content}
                    </div>
                </div>
                </div>
                `
                    });
                })
            })

        })

    })

    // 点击删除删除文章
    $('body').on('click', '#delList', function () {
        // 获取自定义属性
        let id = $(this).attr('data-id')
        layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
            // 发起ajax请求
            axios({
                url: '/my/article/delete/' + id
            }).then(({ data: res }) => {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                layer.msg('恭喜您，删除文章成功！')
                $('##delList').length == 1 && q.pagenum >= 2 && q.pagenum--
                initCateList()
            })
            layer.close(index);
        });
    })


})